#============================================
#知识点
# -------------------------------------------
# 设置长宽or背景颜色
# <style>
# P{
    # background-color: red;
    # height: 200px;
    # width: 400px;
# span {
# background-color: green;
    # height: 200px;
    # width:400px;
    # /*行内标签无法设置长宽就算你写了也不会生效*/
# }
# </style>
# ------------------------------------------
# 字体属性
# P{
# /*font- family: "Arial Black", "微软雅黑","..."; !*第一 个不生效
# 就用后面的写多个备用*!*/
# /*font-size: 24px; !*字体大小*!*/ 
# /* font- weight: inherit;
# !*bolder lighter 100~900 inherit继
# 承父元素的粗细值*!*/
# /*color: red;
# !*直接写颜色英文*!*/
# /*color: #ee762e; ↓ *颜色编号*!*/
# /*color: rgb(128,23,45); !*三基色 数字范围0-255*1*/
# /*color: rgba(23, 128，91, 0.9); !*第四个参数是颜色的透明度 范
# 围是0-1*1*/
# /*当你想要一些颜色的时候可以利用现成的工具
# 1 pycharm提供的取色器
# 2 qq或者微信截图功能
# */
# }
# ------------------------------------------
# 文字属性
# P{
# /*text-align: center; !*居中*!*/
# /*text-align: right;*/
# /*text-align: left;*/
# /text-align: justify; ! *两端对齐*!*/
 
# /* text-decoration: underline;*/
# /*text-decoration: overline;*/
# /*text-decoration: line-through;*/
# /*text-decoration: none;*/
# /*在htm1中有很多标签渲染出来的样式效果是一样的*/

# font-size: 16px;
# text-indent: 32px; / *缩进32px*/
# }

# a{
# text-decoration: none; /*主要用于给a标签 去掉自带的下划线需要掌
# 握*/
# }
# ------------------------------------------
# 背景属性
# #背景色
# backgroud-color
# #背景图片
# background:#fff url() no-repeat center center
# ps:当多个属性名前缀都是相同的情况下- 般都支持简写:只写前缀
# ps:在调样式的时候可以借助于浏览器快速的微调，然后讲调整好的参数修改到css样式中
# #背景图片实际应用的案例
# ------------------------------------------
#边框
# <styLe>
# p{
# background-coLor: red;
# border-width: 5px;
# border-styLe: solid;
# border-coLor: green;
# </styLe> 
#可简写
# border: 3px soLid red;

#画圆
# #d1 {
# background-coLor: greenyelLow;
# height: 400px;
# width: 400px;
# border-radius: 50%; /*直接写50%即可 长宽-样就是圆 不一样就是椭圆*/
# }
# ------------------------------------------
#display 显示
# p{
#   display:none 隐藏
#   display:inline 把标签变为行内标签的特点 
#   display:block  把标签变为块级标签的特点 
#   display:inline-block   把标签变为行内标签和块级标签的特点(可以设置大小，并且再一行)
# }
# ------------------------------------------
# 盒子模型
# body {
# margin: 0;   外距离
# /*上下左右全是0
# / *margin: 10px 20px;
# !*第一个上下第二个左右*!*/
# / *margin: 1@px 20px 30px;
# !*第一个上 第二个左右 第三个下*!*/
# /*margin: 1@px 20px 30px 4@px; !*上 右下左*!*/ 

# #dd{
# margin: 0 auto;
# /*只能做到标签的水平居中*/
# }

# #d1 {
#       margin-bottom: 20px;
# #d2 {
#       margin-top: 20px; /*不叠加*/
#        }
 
# /*padding: 10px 20px 30px 40px;*/ /*规律和margin一模一样*/  内距离

# -----------------------------------------
# 浮动
# #d1 {
# height: 200px;
# width: 200px;
# background-color: red;
# fLoat: Left; /*浮动 浮到空中往左飘*/
# }

# #d2 {
# height: 200px;
# width: 200px;
# background-color: greenyelLow ;
# fLoat: right; /*浮动 浮到空中往右飘*/
# }

# 浮动的元素没有块儿级一说本身多大浮起来之后就只能占多大'
# 只要是设计到页面的布局一般都是 用浮动来提前规划好
#============================================
# 解决浮动带来的影响
# #浮动带来的影响
# 会造成父标签塌陷的问题
# 解决浮动带来的影响推导步骤
# 1.自己加一个div设置高度
# 2.利用clear属性
# #d4 {
# clear: left; /* 该标签的左边(地面和空中)不能有浮动的元素*/
# 3.通用的解决浮动带来的影响方法
# 在写htm1页面之前先提前写好处理浮动带来的影响的css代码
# .clearfix:after {
# content : ""
# display: block;
# clear :both;
# 之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
#============================================
# 溢出属性
# P{
# height: 100px;
# width: 50px;
# border: 3px solid red;
# /*overflow: visible;
# ↓*默认就是可见溢出还是展示*1*/
# / *overflow: hidden;
# !*溢出部分直接隐藏*!*/
# /*overf1ow: scroll;
# !*设置成上下滚动条的形式*!*/
# /*overf1ow: auto;*/ 
# }
#============================================
# 定位
# ●静态
# 所有的标签默认都是静态的static,无法改变位置
# ●相对定位(了解)
# 相对于标签原来的位置做移动relative
# ●绝对定位(常用)
# 相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)absolute
# eg:小米网站购物车
# ●固定定位(常用)
# 相对于浏览器窗口固定在某个位置
# eg:右侧小广告

# d1 {
# height: 100px;
# width: 100px;
# background-coLor: red; 
# Left: 50px; /*从左往右
# 如果是负数方向则相反*/
# top: 50px; /*从 上往下
# 如果是负数方向则相反*/
# /*position: stltic; !*默认是static无法修改位置*!*/
# position: relative;
# /*相对定位标签 
# 由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签*/
# 虽然位置没动，但是你的性质已经变了
# }

# #d2 {
# heightr 100px;
# width: 200px;
# background-coLor: red;
# position: relative; /*已经定位过了*/ 
# }
# #d3 {
# height: 200px;
# width: 400px;
# background-coLor: yelLowgreen; 
# position: absolute;
# left:800px;
# top :200px
# }   依据父标签来定位


# #d4 {
# position: fixed; /*写 了fixed之后定位就是依据浏览器窗口
# bottom: 10px;
# right: 20px;
# height: 50px;
# width: 100px;
# background-color: white;
# }  
#============================================
# 验证浮动和定位是否脱离文档流(原来的位置是否还保留)
# 浮动
# 相对定位
# 绝对定位
# 固定定位
# #不脱离文档流
# 1.相对定位
# #脱离文档流
# 1.浮动
# 2.绝对定位
# 3.固定定位
#============================================
# z-index模态框
# eg:百度登陆页面其实是三层结构
# 1.最底部是正常内容(z=0)最远的
# 2.黑色的透明区(z=99)
# 中间层
# 3.白色的注册区域(z=100)离用户最近
# <styLe>
# body {
# margin: 0;
# }
# ， cover {
# position: fixed;
# Left: 0;
# top: 0;
# right: 0;
# I
# bottom: 0 ;
# background-coLor: rgba(0,0,0,0.5);
# z-index: 99; 
# }
# , modal {
# background-coLor: white;
# height: 200px;
# width: 400px;
# position: fixed;
# Left: 50%;
# top: 50%;
# z-index: 100;
# Left: 50%;
# top: 50%;
# z- index: 100;
# margin-Left: - 200px;
# margin-top: - 100px;
# }
# </ styLe>
# </head>
# <body> 
# <div>这是最底层的页面内容</div>
# <div cLass=" cover"></div>
# <div class= "modaL">
# <h1>登陆页面</h1>
# <p>username: <input type="text"></p>
# <p>password:<input type="text"></p>
# <button>点我点我~< /button> 
# </div>
# </body>
#============================================
# 透明度opacity
# #它不单单可以修改颜色的透明度还同时修改字体的透明度
# rgba只能影响颜色
# 而opac ity可以修改颜色和字体
#============================================